<template>
  <div class="store">
    <!-- 所在门店 -->
    <div class="car_store">
      <div class="title">所在门店</div>
      <div class="store_name">{{dataDetail.storeName}}</div>
      <div class="store_content">
        <div class="content">
          <!-- <div>在售车 17 辆 | 距您 60.8km</div> -->
          <div>{{dataDetail.storeSite}}</div>
        </div>
        <div class="function">
          <div class="fun_box">
            <div><van-icon name="guide-o" /></div>
            <button
            v-clipboard="dataDetail.storeName"
            v-clipboard:success="clipboardSuccessHandler"
            >复制地址</button>
          </div>
          <div>
            <div><van-icon name="phone-o" /></div>
            <p><a :href="'tel:' + dataDetail.storeTel">门店电话</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataDetail:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      value: '111'
    }
  },
  methods: {
    clipboardSuccessHandler({ value, event }) {
      this.$toast.success('复制成功')
      console.log(value)
    },
  }
}
</script>

<style scoped lang="less">
.store{
  .title{
    // margin: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-left: 5px solid #FF571A;
    padding-left: 10px;
    font-size: 15px;
    color: #666;
    font-weight: 550;
  }
  .car_store{
    margin: 16px;
    .store_name{
      font-size: 20px;
      font-weight: 550;
    }
    .store_content{
      display: flex;
      justify-content: space-between;
      .content{
        flex: 1;
        // width: 50%;
        margin: 5px 0;
        font-size: 14px;
        // color: #666;
        div:nth-child(1){
          margin: 5px 0;
        }
        div:nth-child(2){
          width: 190px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 12px;
        }
      }
      .function{
        flex: 1;
        // width: 50%;
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 13px;
        .fun_box{
          border-right: 1px solid #999;
        }
        div{
          flex: 1;
        }
        div:nth-child(1){
        }
        button{
          border: none;
          background-color: white;
          padding: 0;
          display: inline;
        }
      }
    }
  }
}
</style>